<template>
  <div>
    <div class="score-card-title">
      {{`${area}`}}
    </div>
    <div class="score-card">
      <el-table :data="score" style="width: 100%">
        <el-table-column v-for="(option, index) in options" :key="option" :label="option">
          <template slot="header">
            <div>{{option}}</div>
            <!--                         <score-label :time-series="timeSeries"/> -->
          </template>
          <template slot-scope="scope">
            <score-grid
                :scoreArray="scope.row[option]"
                :mode="scoreMode"
                :colType="option"
                :rowType="getRowType(scope.$index)"
                :time-series="timeSeries"
                :levels="levels"
                :tips-left="index > options.length / 2"
                @showDetail="showDetail"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="详细数据" :visible.sync="scoreDetail.visible" width="50%" >
      <ScoreDetail :request-data="requestData" :dates="scoreDetail.dates" :values="scoreDetail.values" :mode1="mode1" :mode2="mode2"/>
    </el-dialog>
  </div>
</template>

<script>
import ScoreGrid from './ScoreGrid.vue';
import ScoreDetail from './ScoreDetail.vue';
import ScoreLabel from './ScoreLabel.vue';

export default {
  name: 'Card',
  components: {
    ScoreGrid,
    ScoreDetail,
    ScoreLabel,
  },
  props: {
    score: {
      required: true,
      type: Array,
    },
    scoreMode: {
      type: String,
      default: '颜色',
    },
    area: {
      type: String,
      default: '',
    },
    mode1: {
      type: String,
    },
    mode2: {
      type: String,
    },
    options: {
      type: Array,
      default: () => ['ACC', 'RMSE', 'BIAS'],
    },
    levels: {
      type: Array,
      default: () => [1000, 850, 700, 500, 250, 100, 70, 50, 10, 5, 3, 1],
    },
    timeSeries: {
      type: Array,
      default: () => [24, 48, 72, 96, 120, 144, 168, 192, 216, 240],
    },
    datesList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      scoreDetail: {
        chartsTitle: '',
        visible: false,
        dates: ['100600', '100612', '100700', '100712', '100800', '100812'],
        values: [820, 932, 901, 934, 1290, 1330],
      },
      // 二级卡片请求数据
      requestData: {
        mode1: null,
        mode2: null,
        area: null,
        datesList: [],
        metric: null,
        variable: null,
        level: null,
      }
    }
  },
  methods: {
    showDetail(param) {
      const {mode1, mode2, area, datesList} = this;
      this.requestData = {mode1, mode2, area, datesList, ...param};
      this.scoreDetail.visible = true;
    },
    getRowType(i) {
      const list = ['HGT', 'TMP', 'u', 'v', 'w'];
      return list[i];
    },
    isGrapes() {
      return this.$route.path.indexOf('grapes') > -1;
    }
  },
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/DFcontent.scss';
.score-card-title {
  color: #909399;
  text-align: center;
  height: 1em;
  line-height: 1em;
  font-weight: bold;
  margin: 10px;
}
.score-card {
  //width: 100%;
  .card-index {
    display: flex;
    align-items: center;
    div {
      flex: 1;
      &:last-child {
        display: flex;
        flex-direction: column;
        div {
          height: 1em;
          line-height: 1em;
          text-align: center;
          color: #ffffff;
          margin: 1px;
        }
      }
    }
  }
  ::v-deep {
    .cell {
      text-align: center;
      padding: 0 4px;
    }
    td {
      padding: 4px 0;
    }
  }
}

</style>